<template>
  <div class="messa">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="系统消息" name="first">
        <div class="messa_1">
          <div class="messa_1_1">
            账户即将到期提醒
            <span class="messa_1_1_1">2020/09/09 10:55</span>
          </div>
          <div class="messa_1_2">
            系统将于3天后到期，请尽快续费，以免影响您正常使用。
          </div>
        </div>
        <div class="messa_1_3"></div>
        <div class="messa_1">
          <div class="messa_1_1">
            账户即将到期提醒
            <span class="messa_1_1_1">2020/09/09 10:55</span>
          </div>
          <div class="messa_1_2">
            系统将于3天后到期，请尽快续费，以免影响您正常使用。
          </div>
        </div>
        <div class="messa_1_3"></div>
        <div class="messa_1">
          <div class="messa_1_1">
            账户即将到期提醒
            <span class="messa_1_1_1">2020/09/09 10:55</span>
          </div>
          <div class="messa_1_2">
            系统将于3天后到期，请尽快续费，以免影响您正常使用。
          </div>
        </div>
        <div class="messa_1_3"></div>
        <div class="messa_1">
          <div class="messa_1_1">
            账户即将到期提醒
            <span class="messa_1_1_1">2020/09/09 10:55</span>
          </div>
          <div class="messa_1_2">
            系统将于3天后到期，请尽快续费，以免影响您正常使用。
          </div>
        </div>
        <div class="messa_1_3"></div>
      </el-tab-pane>
      <el-tab-pane label="通知公告" name="second">
        <div class="messa_1">
          <div class="messa_1_1">
            产品上新通知
            <span class="messa_1_1_1">2020/09/09 10:55</span>
          </div>
          <div class="messa_1_2">
            WCTmm-234号产品将于本月9号正式上新，请客服一组的同事尽快熟悉产品功能介绍。
          </div>
        </div>
        <div class="messa_1_3"></div>
        <div class="messa_1">
          <div class="messa_1_1">
            产品上新通知
            <span class="messa_1_1_1">2020/09/09 10:55</span>
          </div>
          <div class="messa_1_2">
            WCTmm-234号产品将于本月9号正式上新，请客服一组的同事尽快熟悉产品功能介绍。
          </div>
        </div>
        <div class="messa_1_3"></div>
        <div class="messa_1">
          <div class="messa_1_1">
            产品上新通知
            <span class="messa_1_1_1">2020/09/09 10:55</span>
          </div>
          <div class="messa_1_2">
            WCTmm-234号产品将于本月9号正式上新，请客服一组的同事尽快熟悉产品功能介绍。
          </div>
        </div>
        <div class="messa_1_3"></div>
        <div class="messa_1">
          <div class="messa_1_1">
            产品上新通知
            <span class="messa_1_1_1">2020/09/09 10:55</span>
          </div>
          <div class="messa_1_2">
            WCTmm-234号产品将于本月9号正式上新，请客服一组的同事尽快熟悉产品功能介绍。
          </div>
        </div>
        <div class="messa_1_3"></div>
      </el-tab-pane>
    </el-tabs>
    <div class="messa_2">
      <el-button type="text" @click="open">清空所有记录</el-button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeName: "first",
    };
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
    open() {
      this.$confirm("消息清空后无法恢复，确定清空所有消息吗?", "清空确认", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "清除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          });
        });
    },
  },
};
</script>

<style>
.messa {
  width: 1000px;
  height: 770px;
  background-color: #ffffff;
  padding: 10px 10px;
  display: flex;
}
/* 头部 */
.messa .el-tabs__nav {
  padding-top: 10px;
  padding-bottom: 10px;
  left: 10px;
}
.messa .el-tabs__nav-scroll .el-tabs__active-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  background-color: #409eff;
  z-index: 1;
  transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  list-style: none;
}

/* 字体 */
.messa_1 {
  width: 100%;
  height: 101px;
  position: relative;
  left: 40px;
  top: 20px;
  font-family: PingFangSC-Regular, "PingFang SC", sans-serif;
  font-weight: 400;
  font-style: normal;
  text-align: left;
  line-height: 30px;
}
.mess_1_1 {
  font-size: 16px;
}
.messa_1_1_1 {
  font-size: 13px;
  color: #cccccc;
  position: relative;
  left: 16px;
}
.messa_1_2 {
  font-size: 14px;
  color: #bfbfbf;
}
.messa_1_3 {
  width: 980px;
  height: 0.5px;
  background-color: #cccccc;
  position: relative;
  top: 1px;
  left: 25px;
}
.messa_2 {
  width: 80px;
  height: 38px;
  padding: 0 20px;
  border: solid 1px #d9d9d9;
  border-radius: 2px;
  position: relative;
  right: 120px;
  top: 12px;
}
.messa_2 .el-button--text {
  color: #999999;
  font-size: 14px;
  font-weight: 400;
}
/* 清除提示款样式 */
.messa .el-message-box__wrapper .el-message-box {
  width: 400px;
  height: 220px;
  /* position: fixed;
    right: 50%;
    top: 50%; */
}
.messa .el-message-box .el-message-box__header {
  width: 430px;
  height: 40px;
  position: relative;
  left: -20px;
  top: 50px;
  border-bottom: solid 1px #f2f2f2;
}
.messa .el-message-box__header .el-message-box__title {
  width: 100%;
  height: 50px;
  position: relative;
  left: 25px;
  top: 10px;
  font-size: 16px;
}

.messa .el-message-box .el-message-box__content {
  width: 100%;
  height: 90px;
  position: relative;
  top: 50px;
  border-bottom: solid 1px#f2f2f2;
  /* border-top:solid #f2f2f2 ; */
}

.messa .el-message-box .el-message-box__btns {
  width: 100%;
  height: 50px;
  position: relative;
  right: 40px;
  top: 60px;
}
/* 按钮 */

.messa .el-message-box__btns .el-button {
  display: inline-block;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  background-color: #ffffff;
  /* border: 1px solid #DCDFE6; */
  color: #d9d9d9;
  -webkit-appearance: none;
  text-align: center;
  box-sizing: border-box;
  outline: 0;
  margin: 0;
  transition: 0.1s;
  font-weight: 500;
  padding: 12px 20px;
  font-size: 14px;
  border-radius: 4px;
}
.messa .el-message-box__btns .el-button--small {
  font-size: 17px;
  border-radius: 3px;
  padding: 6px 25px;
}

.messa .el-message-box__btns .el-button--primary {
  background-color: #4d4dff;
}

.messa .el-message-box__btns.el-button--small.is-round {
  padding: 6px 25px;
}
</style>